<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="访客通行" :autoBack="true">
			</u-navbar>
		</view>

		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #f8f8f8;">
			<!-- 访客通行 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-left: 30rpx; padding-right: 30rpx;">
							<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
								<u-form-item label="受访楼号" prop="userInfo.house" required labelWidth="70" borderBottom
									@click="showFloor = true; hideKeyboard()" ref="item1">
									<u-input disabled v-model="model1.userInfo.house" placeholder="请选择受访楼号"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>

								<u-form-item label="受访时间" prop="userInfo.time" required labelWidth="70" borderBottom
									@click="showTime = true; hideKeyboard()">
									<u-input disabled v-model="model1.userInfo.time" placeholder="请选择受访时间"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>

								</u-form-item>

								<u-form-item label="访客姓名" prop="userInfo.name" required labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name" placeholder="请填写访客姓名" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="访客电话" prop="userInfo.tel" required labelWidth="70" borderBottom
									@click="telKeyShow = true; hideKeyboard()">
									<u-input disabled v-model="model1.userInfo.tel" placeholder="请填写访客电话" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="同行人数" prop="userInfo.person" required labelWidth="70" borderBottom
									@click="showPerson = true; hideKeyboard()" ref="item1">
									<u-input disabled v-model="model1.userInfo.person" placeholder="请选择同行人数"
										border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>

								<u-form-item label="是否驾车" prop="userInfo.is_car" required labelWidth="70" borderBottom>
									<view style="text-align: right;">
										<u-switch v-model="model1.userInfo.is_car" @change="changeIsCar"></u-switch>
									</view>

								</u-form-item>

								<view v-if="model1.userInfo.is_car == true">
									<u-form-item label="车牌号码" prop="userInfo.car" required labelWidth="70" borderBottom
										@click="carKeyShow = true; hideKeyboard()">
										<u-input disabled v-model="model1.userInfo.car" placeholder="请填写车牌号码"
											border="none" disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
										</u-input>
									</u-form-item>
								</view>
							</u-form>
						</view>
					</view>
				</view>
			</view>


			<u-toast ref="uToast" />
			<!-- 下拉工具 -->
			<u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择受访楼号" @close="showFloor = false"
				@select="floorSelect">
			</u-action-sheet>
			<u-action-sheet :show="showPerson" :actions="actionsPerson" title="请选择同行人数" @close="showPerson = false"
				@select="personSelect">
			</u-action-sheet>
			<u-datetime-picker :show="showTime" v-model="actionsTime" mode="datetime" @confirm="timeSelect"
				@cancel="showTime = false">
			</u-datetime-picker>
			<u-keyboard mode="number" @confirm="confirmTel" @change="valChange" @backspace="backspace"
				:dotDisabled="true" :show="telKeyShow" @cancel="telKeyShow = false">
			</u-keyboard>
			<u-keyboard mode="car" @confirm="confirmCar" @change="carChange" @backspace="backspaceCar"
				:dotDisabled="true" :show="carKeyShow" @cancel="carKeyShow = false">
			</u-keyboard>

			<u-toast ref="uToast" :loading="true"></u-toast>
			<u-modal :show="showHouse" title="提示" content='房屋绑定审核中...' :showCancelButton="true" confirmText="重新绑定" cancelText="等待审核" @confirm="bindHouse" @cancel="back"></u-modal>
			<u-button :customStyle="btnStyle" @click="confirmRes">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getFloor
	} from "@/service/userService.js";

	import {
		visit
	} from "@/service/propertyService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '94%',
					marginLeft: '3%',
					borderRadius: '40rpx',
					marginTop: '100rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				showFloor: false,
				showTime: false,
				showHouse: false,
				telKeyShow: false,
				showPerson: false,
				carKeyShow: false,
				model1: {
					userInfo: {
						name: '',
						house: '',
						time: '',
						tel: '',
						person: '',
						is_car: false,
						car: ''
					},
				},
				actionsFloor: [],
				actionsPerson: [{
						name: 1
					},
					{
						name: 2
					},
					{
						name: 3
					},
					{
						name: 4
					},
					{
						name: 5
					}
				],
				actionsTime: Number(new Date()),
				rules: {
					'userInfo.tel': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				radio: '',
				switchVal: false
			};
		},
		onLoad() {
			getFloor().then(this.getHouse);
		},
		methods: {
			getHouse(e) {
				if (e.code == 200) {
					this.actionsFloor = e.result;
				} else {
					if(e.msg == '等待审核'){
						this.showHouse = true;
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							message: e.msg,
							complete() {
								uni.navigateTo({
									url:"/pagesMine/house/index"
								})
							}
						})
					}
				}
			},
			bindHouse(){
				uni.navigateTo({
					url:"/pagesMine/house/index"
				})
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			floorSelect(e) {
				this.model1.userInfo.house = e.name;
			},
			personSelect(e) {
				this.model1.userInfo.person = e.name;
			},
			timeSelect(e) {
				let time = this.result(e.time, e.mode);
				this.model1.userInfo.time = time;
				this.showTime = false;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.model1.userInfo.tel += val;

				this.$refs.form1.validateField('userInfo.tel');
			},
			carChange(val) {
				this.model1.userInfo.car += val;
			},
			changeIsCar(e) {
				this.model1.userInfo.is_car = e;
			},
			confirmTel() {
				this.telKeyShow = false;
			},
			confirmCar() {
				this.carKeyShow = false;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.model1.userInfo.tel.length) this.model1.userInfo.tel = this.model1.userInfo.tel.substr(0, this
					.model1.userInfo.tel.length - 1);
			},
			backspaceCar() {
				// 删除value的最后一个字符
				if (this.model1.userInfo.car.length) this.model1.userInfo.car = this.model1.userInfo.car.substr(0, this
					.model1.userInfo.car.length - 1);
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			confirmRes() {
				let par = this.model1.userInfo;
				if (this.model1.userInfo.is_car == false) {
					par.is_car = 0;
					par.car = ''
				}

				visit(par).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({

							type: 'success',
							message: "提交成功",
							complete() {
								console.log(123123);
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						this.$refs.uToast.show({

							type: 'error',
							message: res.msg,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})

			}
		},
	};
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
